<template>
	<view>
		<tab-bar style="width: 100%;" :tabBars="tabBar.tabBars" :tabIndex="tabBar.tabIndex" @tapTab="tapTab"></tab-bar>
	  <view class="swiper-box">
			<swiper  :duration="300" @change="swiperChange" class="swiper-box2" :current="tabBar.tabIndex">
				<block v-for="(item2,index2) in 3" :key="index2">
					<swiper-item >
						<scroll-view scroll-y class="scroll-view">
							<block v-for="(item,index) in 4" :key="index">
								<view class="info-card">
									<view class="card-head f-side">
										<view class="flex card-head-left">
											<view class="f-center">
												<image src="" mode=""></image>
											</view>
											<view class="car-info">
												<view>川a 12452</view>
												<view>4000 km</view>
											</view>
										</view>
										<view class="card-head-right flex zcAlignI_center">
											<view>美容</view>
											<view>洗车</view>
											<view>保养</view>
										</view>
									</view>
									<view class="f-side"><view>客户姓名：</view><view>徐凯</view></view>
									<view class="f-side"><view>联系电弧：</view><view>1333333333</view></view>
									<view class="f-side"><view>服务顾问：</view><view>徐凯</view></view>
									<view class="f-side"><view>服务时间：</view><view>2019-11-6</view></view>
									<view class="f-side">
										<view>服务状态：</view>
										<view class="flex status">
											<view class="status-finish">已交车</view>
											<view class="status-service">留店车</view>
											<view class="status-forgive">已终止</view>
											<view class="status-forgive">作废</view>
										</view>
									</view>
									<view class="bottom-btn flex">
										<view class="flex"> <button type="primary"> 终止</button> <button type="primary"> 交车</button></view>
									</view>
								</view>
							</block>
						</scroll-view>
					</swiper-item>
				</block>
			</swiper>					
		</view>
	</view>
</template>

<script>
	let _this;
	import tabBar from "../../components/tab-bar/tab-bar.vue"
	export default {
		components:{
			tabBar
		},
		data() {
			return {
					tabBar:{
					tabIndex:0,
					tabBars:[
						{name:'历史'},
						{name:'进行'},
						{name:'作废'}
					]
				},
			}
		},
		created(){
			_this = this;
		},
		methods: {
			tapTab(e){
				_this.tabBar.tabIndex = e
			},
			swiperChange(e){
				_this.tabBar.tabIndex = e.detail.current
			}
		}
	}
</script>

<style>
	.zc-swiper-tab{border-radius: 0!important;margin-bottom: 0!important;border: none!important;box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;}
	.swiper-tab-list{color: #9B9B9B;width: 33.3%!important;background-color: #FFFFFF;border: none!important;padding: 20upx 0!important;}
	.uni-tab-bar .active{color: #3CA4F9!important;background-color: #FFFFFF;position: relative;text-align: center;}
	.uni-tab-bar .active:after{content: '';position: absolute;width: 25%;height: 5upx;background-color: #3CA4F9;left: 37%;bottom: 10upx;border-radius: 3upx;}
 .swiper-box{
	 position: absolute;
	 top:90upx;
	 width: 100%;
	 bottom: 0;
 }
 .scroll-view,.swiper-box2{
	 height: 100%;
 }
 .swiper{
height: auto; 
}
.card-head-left image{
	width: 70upx;
	height: 70upx;
	margin:0 20upx 0 10upx;
	margin-top: 10upx;
	border-radius: 50%;
	border: 1upx solid #ccc;
}
.info-card{
	margin: 20upx 20upx;
	padding: 0 20upx 20upx 20upx;
	border-radius: 10upx;
	box-shadow: 1upx 1upx 5upx 4upx #EAEDF1;
	background-color: #fff;
}
.card-head{
	padding-bottom: 10upx;
	border-bottom: 1upx solid #F9F9F9;
}
.car-info>view:first-child{
	font-size: 32upx;
	font-weight: 530;
	height: 60upx;
	line-height: 75upx;
}
.car-info>view:last-child{
	height: 30upx;
	font-size: 26upx;
	line-height: 20upx;
}
.card-head-right>view{
	height: 40upx;
	line-height: 40upx;
	padding: 0 15upx;
	border-radius: 20upx;
	background-color:#0AD8B2 ;
	color: #fff;
	margin-left: 10upx;
}
.card-head-right>view:nth-of-type(2n){
		background-color:#009CFE ;
}
.card-head-right>view:nth-of-type(3n){
		background-color:#9F9F9F ;
}
.status-finish{
	color:#46E1BF ;
}
.status-service{
	color:#84C3FA ;
}
.status-forgive{
	color:#FD7483 ;
}
.status>view{
	margin-left: 20upx;
}
.bottom-btn{
	height: 70upx;
	line-height: 70upx;
}
.bottom-btn>view{
	margin-left: auto;
}
.bottom-btn>view button{
	height: 50upx;
	line-height: 50upx;
	background-color: #9F9F9F;
	color: #fff;
	padding: 0 25upx;
	border-radius: 10upx;
	margin-right: 20upx;
	font-size: 28upx;
	margin-top: 10upx;
}
.bottom-btn>view button:last-child{
	background-color: #4EADFD;
	margin-right: 0;
}
</style>
